<template>
  <!-- table -->
  <tree-table
    :data="goodsSortInfo"
    :columns="columns"
    show-index
    index-text="#"
    stripe
    border
    :expand-type="false"
    :selection-type="false"
    :show-row-hover="false"
  >
    <!-- isok -->
    <template slot="isok" slot-scope="data">
      <i class="el-icon-success" style="color: lightgreen;" v-if="!data.row.cat_deleted"></i>
      <i class="el-icon-error" style="color: red;" v-else-if="data.row.cat_deleted"></i>
    </template>

    <!-- 排序模板 -->
    <template slot="sort" slot-scope="data">
      <el-tag v-if="data.row.cat_level === 0">一级</el-tag>
      <el-tag v-if="data.row.cat_level === 1" type="success">二级</el-tag>
      <el-tag v-if="data.row.cat_level === 2" type="warning">三级</el-tag>
    </template>

    <!-- 操作模板 -->
    <template slot="operate" slot-scope="data">
      <el-button-com icon="el-icon-edit" size="medium" text="编辑" @click.native="editorGoodSort(data.row)"/>
      <el-button-com icon="el-icon-delete" size="medium" text="删除" btnType="danger" @click.native="delFunc(data.row)" />
    </template>

  </tree-table>
</template>

<script>
// 组件
import ElButtonCom from '@/components/common/ElButtonCom';

// 网络
import { delGoodSortById } from '@/network/goodSortRequest';

export default {
  data() {
    return {
      columns: [ // table-tree每行配置
        {
          align: 'center',
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          align: 'center',
          label: '是否有效',
          prop: 'cat_deleted',
          type: 'template',
          template: 'isok'
        },
        {
          align: 'center',
          label: '排序',
          prop: 'cat_level',
          type: 'template',
          template: 'sort'
        },
        {
          align: 'center',
          label: '操作',
          type: 'template',
          template: 'operate'
        }
      ]
    }
  },
  props: {
    goodsSortInfo: {
      type: Array
    }
  },
  methods: {
    editorGoodSort (item) {
      return this.$bus.$emit('openEditorGoodSortDiaolg', item.cat_id);
    },
    async delFunc(item) {
      // console.log(item);
      const res = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).catch(err => err);
      // 判断是否删除操作
      if (res !== 'confirm') {
        return this.$message('取消删除操作');
      }

      // 执行删除操作
      const { meta } = await delGoodSortById(item.cat_id);
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      this.$bus.$emit('getAllGoodsInfo'); // 刷新
      return this.$message.success(meta.msg);
    }
  },
  components: {
    ElButtonCom
  }
}
</script>

<style lang="scss" scoped>
</style>